<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<script type="text/javascript" src="../../zxt/zxt.js"></script>
	<script>importZXT("../../zxt");</script>
	<style>  
		.myBar {background-color:#f3f8e6; border-right: 1px solid #999999;border-bottom: 1px solid #999999;border-top: 1px solid #999999;border-left: 1px solid #999999; margin:5px}
		.myBar div{font-size: 12px;font-weight: Bold;}
	</style>  	
</head>

<body>

	<div zxt="zxt.ui.Columns" class="myBar">  	
  
		<div id="Choose1" zxt="zxt.ui.Choose" zxt.group="group1" zxt.default="">
			<table border=0>
			<tr>
				<td>&nbsp;</td>
				<td><div option=""></div></td>
			</tr>
			<tr>
				<td>1</td>
				<td><div option="1"></div></td>
			</tr>
			<tr>
				<td>2</td>
				<td><div option="2"></div></td>
			</tr>
			</table>
		</div>
		
		<img src="../../zxt/images/efgrid_blue_divider.gif" />
		<div id="Choose1Btn" zxt="zxt.ui.Button" zxt.label="choose1" zxt.text="GetValue" zxt.end="true"></div>
	</div>
  	
	<div zxt="zxt.ui.Columns" class="myBar">	
		<div id="Choose2" zxt="zxt.ui.Choose" zxt.group="group2" zxt.default="Male">
			<div zxt.option="Male" zxt.label="男"></div>
			<div zxt.option="Female" zxt.label="女"></div>
		</div>
		<img src="../../zxt/images/efgrid_blue_divider.gif" />
		<div id="Choose2Btn" zxt="zxt.ui.Button" zxt.label="choose2" zxt.text="GetValue" zxt.end="true"></div>
	</div>
	
	<div id="socket1" style="width:200px"></div>	
	<div id="socket2" style="width:100px"></div>
	<div id="socket3" style="width:100px"></div>

	<div id="layout" style="display:none">	
			<table>
				<tr>
					<td>男</td>
					<td><div option="Male"></div></td>
					<td>女</td>
					<td><div option="Female"></div></td>
				</tr>
			</table>
	</div>

	<table>
		<tr>
			<td>getType()</td>
			<td>返回控件类型</td>
			<td><input type="button" name="getType" value="getType" 
				onclick="alert('单选控件的type为'+$zxtUI.Choose1.getType());"/></td>
		</tr>
		<tr>
			<td>getMask()</td>
			<td>[MASK]模式下显示值</td>
			<td><input type="button" name="getMask" value="getMask" 
				onclick="alert('第2个单选控件的getMask为'+$zxtUI.Choose2.getMask());"/></td>
		</tr>
		<tr>
			<td>getSelfLabel()</td>
			<td>返回选项的标签内容</td>
			<td><input type="button" name="getSelfLabel" value="getSelfLabel" 
				onclick="alert('第2个单选控件的getSelfLabel为'+$zxtUI.Choose2.getSelfLabel());"/></td>
		</tr>
		<tr>
			<td>getSelfValue()</td>
			<td>返回选项的值</td>
			<td><input type="button" name="getSelfValue" value="getSelfValue" 
				onclick="alert('第2个单选控件的getSelfValue为'+$zxtUI.Choose2.getSelfValue());"/></td>
		</tr>
		<tr>
			<td>addOption(value, label)</td>
			<td>添加一个选项 只有在控件初始化之前有效</td>
			<td><input type="button" name="addOption" value="addOption" 
				onclick="addOption();"/></td>
		</tr>
		<tr>
			<td>renderValue() </td>
			<td>渲染值</td>
			<td><input type="button" name="renderValue" value="renderValue" 
				onclick="$zxtUI.Choose2.renderValue('Female')"/></td>
		</tr>
		<tr>
			<td>renderValue() </td>
			<td>渲染值</td>
			<td><input type="button" name="renderValue" value="renderValue" 
				onclick="$zxtUI.Choose2.renderValue('Fmale')"/></td>
		</tr>
		<tr>
			<td>getValue() </td>
			<td>获取值</td>
			<td><input type="button" name="getValue" value="getValue" 
				onclick="alert($zxtUI.Choose2.getValue())"/></td>
		</tr>
	</table>
	
	<div><a href="../index.html">返回</a></div>
</body>
</html>

<script type="text/javascript">
	$zxt.init();	
	$zxtUI.Choose2.mode("MASK");
	$zxtUI.Choose2.render();
	function onClick$Choose1Btn(){
		alert($zxtUI.Choose1.getValue())
	};
	
	function onClick$Choose2Btn(){
		alert($zxtUI.Choose2.getValue())
	};
	

	
	$zxtUI["Choose2"].onValueChange = function(old,newValue){
		alert(old+":"+newValue);
	}
	
	var layout = $("#layout");
	
	var choose1 = new zxt.ui.Choose();			
	choose1.addOption("Male","男");
	choose1.addOption("Female","女");		
	choose1.setValue("Male");		
	
	var choose2 = new zxt.ui.Choose("group4");	
	var layout2 = layout.clone();
	layout2.show();
	choose2.setLayout(layout2);
		
	var choose3 = new zxt.ui.Choose("group5");	
	var layout3 = layout.clone();
	layout3.show();
	choose3.setLayout(layout3);
	
	$("#socket1").append( choose1.render() );
	$("#socket2").append( choose2.render() );
	$("#socket3").append( choose3.render() );
	
	function addOption(){
		$zxtUI.Choose2.addOption("PRO","女博士");
		//$zxtUI.Choose2._rebuild=true;
		$zxtUI.Choose2.render();
		alert('addOption');
	}
	
</script>